<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 表单的语法 -->
    <!-- action 表单提交到的地址    提交表单的方法method  值为get/post  name= 表单的名字-->   
    <form action="./提交到达页面.html" method="POST" name="test">
        <p>
            <!-- type = text 表示文本输入框  name=input 的名字  value是输入框的值 readonly只读  placeholder是提示的文字-->
            昵称: <input type="text" name="username" value="xueliu" readonly placeholder="请输入用户名" minlength="6" maxlength="20" size="5">
        </p>
        <p>
            <!-- type = password   表示密码输入框   name=input 的名字 -->
            密码: <input type="password" name="userpassword" value="" placeholder="请输入密码"  minlength="8" maxlength="20" size="50">
        </p>
        <p>
            <!-- type = submit   表示提交按钮   name=input 的名字   value=按钮的文字 disabled禁用 -->
            <input type="submit" name="usersubmit" value="我自定义的提交按钮" disabled>
        </p>
        <p>
            <!-- type = button   按钮   name=input 的名字   value=按钮的文字 -->
            <input type="button" name="userbutton" value="button按钮" >
        </p>
        <p>
            <!-- type = image   图片提交按钮  src="引入图片的地址"  name=input 的名字   value=按钮的文字 -->
            <input type="image" src="./素材/image/bang.gif" name="userimage"  >
        </p>
        <p>
            <!-- type = radio  单选框   name=input 的名字 同一组名字应该设置成一样的   value=按钮的文字 -->
            <label for="radionv">女</label>
            <input type="radio" name="gender" checked id="radionv">

            <label for="radionan">男</label>
            <input type="radio" name="gender" id="radionan">
        </p>
        <p>
            <!-- type = checkbox  复选框   name=input 的名字 同一组名字应该设置成一样的   value=按钮的文字 -->

            <input type="checkbox" name="gender1" checked id="checkboxnv">
            <label for="checkboxnv">女</label>

            <input type="checkbox" name="gender1" id="checkboxnan">
            <label for="checkboxnan">男</label>
        </p>
        <p>
            <!-- type=reset 重置按钮 -->
            <input type="reset" name="userreset" >
        </p>
        <p>
            <!-- type=file 上传文件 -->
            <input type="file" name="userfile">
        </p>

        <p>
            <!-- type=color 取色器 -->
            <input type="color" name="usercolor">
        </p>
        <p>
            <!-- 输入数字控件 -->
            <input type="range" name="userrange">
        </p>
        <p>
            <!-- 隐藏 -->
            <input type="hidden" name="userhidden">
        </p>

    </form>



</body>
</html>